import React from 'react';

const ImageGrid = ({ images, onImageClick }) => {
  return (
    <div className="image-grid">
      {images.map(image => (
        <div 
          key={image.id} 
          className="image-card"
          onClick={() => onImageClick(image.channel)}
          style={{ cursor: 'pointer' }}
        >
          <div className="image-thumbnail">
            {image.thumbnail ? (
              <img src={image.thumbnail} alt={image.title} />
            ) : (
              <div className="image-placeholder">暂无图片</div>
            )}
          </div>
          
          <div className="image-info">
            <h3 className="image-title">{image.title}</h3>
            <div className="image-stats">
              <span className="image-views">{image.views} 次查看</span>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
};

export default ImageGrid;